<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../../../styles/prod.scss";

  .upload-df {
    vertical-align: top;
    margin-right: 10px;
  }

  .upload-img {
    padding: 0;
  }

  .dialog-footer {
    text-align: right;
    padding-top: 20px;
  }
</style>
<template>
  <div class="app-container calendar-list-container">
    <div v-if="!productDialog.visible">
      <!-- 基本属性 -->
      <custom-card title="报价单内容填写" class="mt-30">
        <template>
          <basic-form :basicInfo="basicForm"
                      :ruleForm="detail.pdsFileModelBaseDto"
                      ref="basicForm"
                      :lang="language"></basic-form>
          <el-button type="success" size="small" @click="addProduct()">添加产品</el-button>
          <el-button type="primary" size="small">查看客户付款条件</el-button>
          <el-table :data="detail.productList" border style="width: 100%">
            <el-table-column label="序号" width="60px" align="center">
              <template slot-scope="scope">
                {{scope.$index+1}}
              </template>
            </el-table-column>
            <el-table-column prop="pdsFileModelBaseDto.name" label="产品名称" align="center">
            </el-table-column>
            <el-table-column prop="num" label="产品规格" align="center">
            </el-table-column>
            <el-table-column prop="pdsFileModelBaseDto.plmModelNo" label="参考型号" align="center">
            </el-table-column>
            <el-table-column prop="num" label="预计订单数量" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.amount" placeholder="请输入数量" required type="number"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="num" label="单位" align="center">
            </el-table-column>
            <el-table-column prop="num" label="全成本" align="center">
            </el-table-column>
            <el-table-column prop="num" label="利润率%" align="center">
            </el-table-column>
            <el-table-column prop="num" label="实际报价" align="center">
            </el-table-column>
            <el-table-column label="操作" width="250px" fixed="right" align="center">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button class="filter-item" type="primary" @click="addProduct(scope.$index)" size="mini">产品配置
                  </el-button>
                  <el-button class="filter-item" type="success" @click="ajustPrice(scope.$index)" size="mini">价格调整
                  </el-button>
                  <el-button class="filter-item" type="danger" @click="deleteProduct(scope.$index)" size="mini">删除
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
          <custom-card title="报价条件">
            <el-button type="success" size="small" @click="addPrice()">添加报价条件</el-button>
            <el-table :data="detail.priceCondition" border style="width: 100%">
              <el-table-column label="序号" width="60px" align="center">
                <template slot-scope="scope">
                  {{scope.$index+1}}
                </template>
              </el-table-column>
              <el-table-column label="条件项" width="200px" align="center">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.condition" placeholder="请选择">
                    <el-option v-for="item in conditionList" :key="item.id"
                               :label="language=='en'?item.labelEnUs:item.labelZhCh" :value="item.id">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="条件内容" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.content" placeholder="请输入条件内容" required></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="" label="操作" width="120px" align="center">
                <template slot-scope="scope">
                  <el-button class="filter-item" type="danger" @click="deletePrice(scope.$index)" size="mini">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </custom-card>
          <custom-card title="其他" class="mt-30">
            <template>
              <basic-form :basicInfo="controlForm" :ruleForm="detail.pdsFileModelBaseDto" ref="basicForm"
                          :lang="language"></basic-form>
              <el-checkbox v-model="detail.checked">The above price is net price and do not include any commssion,third
                party test cost,inspection cost etc.
              </el-checkbox>
            </template>
          </custom-card>
        </template>
      </custom-card>
      <bom-price></bom-price>
      <div class="pds-btm mt-30">
        已保存草稿
        <span class="tip">17分钟前</span>
        <div class="right">
          <el-button class="filter-item" type="warning" @click="submitForm('draft')">保存草稿</el-button>
          <el-button class="filter-item" type="primary" @click="submitForm('save')">提交</el-button>
        </div>
      </div>
    </div>
    <!-- 添加产品 -->
    <div v-show="productDialog.visible">
      <el-input style="width: 200px;" class="filter-item" placeholder="选择参考产品型号" v-model="search.context"></el-input>
      <el-button class="filter-item" type="primary" icon="search" @click="importModel()" size="small">查询</el-button>
      <prod-file ref="prodfile" page="price" v-show="productDialog.product.pdsFileModelBaseDto"></prod-file>
      <div class="dialog-footer">
        <el-button @click="productDialog.visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="chooseProduct()" size="small">确 定</el-button>
      </div>
    </div>

  </div>
</template>
<script>
  import { mapGetters } from 'vuex';
  import BasicForm from '@/components/BasicForm/index';
  import * as baseApi from '@/api/common/index';
  import * as addApi from '@/api/product/model/add';
  import ProdFile from '@/components/Product/prodFile';
  import BomPrice from './components/bomPrice'

  export default {
    name: 'user',
    components: {
      BasicForm,
      ProdFile, BomPrice
      // 'depart-selector': () =>
      //   import ('./components/departSelector')
    },
    data() {
      return {
        productDialog: {
          visible: false,
          index: null,
          product: {}
        },
        search: {
          importType: '参考型号'
        },
        detail: {
          pdsFileModelBaseDto: {},
          productList: [], // 添加产品
          priceCondition: [] // 报价条件
        },
        conditionList: [
          {
            id: 1,
            labelZhCh: '交易条件'
          },
          {
            id: 2,
            labelZhCh: '交货期'
          }, {
            id: 3,
            labelZhCh: '最小起订量'
          }, {
            id: 4,
            labelZhCh: '装箱方式'
          }, {
            id: 5,
            labelZhCh: '付款条件'
          }, {
            id: 6,
            labelZhCh: '标准包装方式'
          }, {
            id: 7,
            labelZhCh: '价格有效期'
          }, {
            id: 8,
            labelZhCh: '影响价格因素'
          }
        ],
        controlForm: [
          {
            label: '退货率',
            unit: '',
            element: 'input',
            name: '',
            type: '',
            col: 100,
            isRequired: false
          },
          {
            label: '保质期',
            unit: '',
            element: 'input',
            name: '',
            type: '',
            col: 100,
            isRequired: false
          }
        ],
        basicForm: [
          {
            label: '报价单号',
            unit: '',
            element: 'input',
            name: '',
            type: '',
            disabled: true,
            isRequired: false,
            placeholder: ' '
          },
          {
            label: '报价日期',
            unit: '',
            element: 'datePicker',
            name: '',
            type: 'date',
            isRequired: true
          },
          {
            label: '失效日期',
            unit: '',
            element: 'datePicker',
            name: '',
            type: 'date',
            isRequired: true
          },
          {
            label: '客户',
            unit: '',
            element: 'selectFilter',
            name: 'customerId',
            type: 'filter',
            isRequired: true
          },
          {
            label: '客户全称',
            unit: '',
            name: 'customerName',
            element: 'input',
            type: '',
            disabled: true,
            isRequired: false,
            options: [],
            placeholder: ' '
          },
          {
            label: '客户型号',
            unit: '',
            element: 'input',
            name: '',
            type: '',
            disabled: true,
            isRequired: true,
            placeholder: ' '
          },
          {
            label: '调价条件',
            unit: '',
            element: 'input',
            name: 'adjustPriceConditionDv',
            type: '',
            dict: 'pds_customer_adjust',
            isRequired: true,
            disabled: true,
            placeholder: ' '
          },
          {
            label: '报价类型',
            unit: '',
            element: 'select',
            dict: 'pds_customer_offer_type',
            name: '',
            append: '',
            type: '',
            isRequired: true
          },
          {
            label: '币种',
            unit: '',
            element: 'select',
            name: 'currencyDv',
            type: '',
            dict: 'comm_currency',
            isRequired: true
          },
          {
            label: '税率',
            unit: '',
            element: 'select',
            name: '',
            append: '',
            dict: 'pds_customer_tmp_tax',
            type: '',
            isRequired: true
          },
          {
            label: '付款条件',
            unit: '',
            element: 'select',
            name: 'paymentTermsDv',
            type: '',
            dict: 'pds_customer_payment',
            isRequired: true
          },
          {
            label: '交运方式',
            unit: '',
            element: 'select',
            name: '',
            type: '',
            dict: 'pds_customer_transport',
            isRequired: true
          },
          {
            label: '起运港',
            unit: '',
            element: 'select',
            append: '',
            name: '',
            type: '',
            isRequired: false
          },
          {
            label: '补充说明',
            unit: '',
            element: 'textarea',
            type: '',
            isRequired: false
          }
        ],
        productCategory: []
      };
    },
    created() {
      this.getDict()
    },
    computed: {
      ...mapGetters(['elements', 'language'])
    },
    methods: {
      refresh() {
      },
      addProduct(index) {
        this.productDialog.visible = true;
        if (index > -1) {
          this.productDialog.index = index;
          this.productDialog.product = JSON.parse(
            JSON.stringify(this.detail.productList[index])
          );
          this.search.context = this.productDialog.product.pdsFileModelBaseDto.plmModelNo;
        } else {
          this.productDialog.product = {};
          this.search.context = '';
        }
        this.$refs.prodfile.refresh(this.productDialog.product);
      },
      chooseProduct() {
        const index = this.productDialog.index;
        if (index != null) {
          this.detail.productList[index] = JSON.parse(
            JSON.stringify(this.productDialog.product)
          );
        } else {
          this.detail.productList.push(
            JSON.parse(JSON.stringify(this.productDialog.product))
          );
        }
        this.search.context = '';
        this.productDialog = {
          visible: false,
          index: null,
          product: {}
        };
      },
      importModel() {
        addApi.importModel(this.search).then(res => {
          if (res.code === 200) {
            this.productDialog.product = res.data;
            this.$refs.prodfile.refresh(res.data);
          } else {
            this.$message.error(res.message);
          }
          // this.detail.pdsFileModelBaseDto.certsDvs=[]
        });
      },

      deleteProduct(index) {
        this.detail.productList.splice(index, 1);
      },
      deletePrice(index) {
        this.detail.priceCondition.splice(index, 1);
      },
      addPrice() {
        this.detail.priceCondition.push({});
      },
      // 获取字典选项
      getDict() {
        let codes = [];
        this.basicForm.map(item => {
          if (item.dict) {
            codes.push(item.dict)
          }
        });
        codes = codes.join(',')

        baseApi.getTypesValue(codes).then(res => {
          this.basicForm.forEach(value => {
            if (value.dict) {
              this.$set(value, 'options', res.data[value.dict]);
            }
          });
        });
      }
    }
  };
</script>
